The dnd-core package is a low-level drag and drop engine that powers complex drag and drop interfaces. It provides the core functionality needed to enable drag and drop interactions within web applications. This package is often used as a foundation for building more complex drag and drop libraries and provides developers with the tools to create custom drag and drop experiences.
Drag Source and Drop Target
This feature allows you to define drag sources and drop targets within your application. You can register these elements with the drag and drop manager, enabling you to create interactive drag and drop interfaces.
import { DragDropManager, BackendFactory } from 'dnd-core';
const backend = BackendFactory; // Use an appropriate backend for your environment
const manager = new DragDropManager(backend);
// Register drag sources and drop targets with the managerCustom Drag Layer
This feature enables the creation of a custom drag layer. You can use the drag layer monitor to track the state of the drag operation and render a custom drag preview or layer based on the item being dragged, its type, and its current position.
import { DragLayerMonitor, XYCoord } from 'dnd-core';
function CustomDragLayer(monitor: DragLayerMonitor) {
const item = monitor.getItem();
const itemType = monitor.getItemType();
const initialOffset = monitor.getInitialSourceClientOffset();
const currentOffset = monitor.getSourceClientOffset();
const isDragging = monitor.isDragging();
// Render custom drag layer based on the current state
}Monitor Drag State
This feature allows you to monitor the state of drag operations. You can use the drag drop monitor to check if an item is currently being dragged, what type of item it is, and perform actions based on this information, enabling dynamic responses to drag and drop interactions.
import { DragDropMonitor } from 'dnd-core';
function handleDragUpdate(monitor: DragDropMonitor) {
const isDragging = monitor.isDragging();
const itemType = monitor.getItemType();
// Perform actions based on the current drag state
}react-dnd is a higher-level abstraction built on top of dnd-core specifically for React applications. It provides a set of React hooks and components to easily enable drag and drop functionality within React components. Compared to dnd-core, react-dnd is more accessible for React developers but less flexible for non-React projects.
react-beautiful-dnd is another React-specific drag and drop library that focuses on creating beautiful, fluid drag and drop experiences with minimal setup. It differs from dnd-core by providing a more opinionated, high-level API that abstracts away much of the complexity involved in setting up drag and drop interactions. It's designed for vertical and horizontal lists and does not require manual handling of drag sources and drop targets like dnd-core.
Drag and drop sans the GUI.
This is a clean implementation of drag and drop primitives that does not depend on the browser. It powers React DnD internally.
To give you a better idea:
This was written to support some rather complicated scenarios that were too hard to implement in React DnD due to its current architecture:
As it turns out, these problems are much easier to solve when DOM is thrown out of the window.
Tests should give you some idea. You register drag sources and drop targets, hook up a backend (you can use barebones TestBackend or implement a fancy real one yourself), and your drag sources and drop targets magically begin to interact.
6.0.0 (2018-11-09)
publishSource to true when options passed to beginDrag (#1161) (76cca25), closes #1161FAQs
Drag and drop sans the GUI
The npm package dnd-core receives a total of 1,814,254 weekly downloads. As such, dnd-core popularity was classified as popular.
We found that dnd-core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.